<template>
    <pui-drawer show :title="mainRef.tabList.name" position="left">
        <div class="form-drawer-content">
            <div class="form-tab horizontal-tab">
                <div class="tabs-content">
                    <div class="list-content outer">
                        <div class="content">
                            <div class="form">
                                <div class="form-content" v-show="mainRef.nowTabIndex === 0">
                                    <div class="form-item">
                                        <div class="label">电压信号参数组</div>
                                    </div>
                                    <div class="form-item">
                                        <div class="label"><pui-radio-group v-model="mainRef.paramsModel" :list="mainRef.paramsList1"></pui-radio-group></div>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">调制深度m(0~1):</div>
                                        <input class="pui-input" v-model="mainRef.optical.tzsd" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">偏置电压vb(V):</div>
                                        <input class="pui-input" v-model="mainRef.optical.pzdy" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">偏置电压漂移率rb(%):</div>
                                        <input class="pui-input" v-model="mainRef.optical.pzdypyl" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">信号序列:</div>
                                        <input class="pui-input" v-model="mainRef.optical.xhxl" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label"><pui-radio-group v-model="mainRef.paramsModel" :list="mainRef.paramsList2"></pui-radio-group></div>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">传输线阻抗Z0(Ω):</div>
                                        <pui-selector :dataList="mainRef.dkList" v-model="mainRef.optical.csxzk"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">有效折射率nm:</div>
                                        <input class="pui-input" v-model="mainRef.optical.yxzsl" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">半波电压Vpi(V):</div>
                                        <input class="pui-input" v-model="mainRef.optical.bbdy" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">微波传输损耗α_m(1/cm):</div>
                                        <input class="pui-input" v-model="mainRef.optical.wbcssh" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                                <div class="form-content" v-show="mainRef.nowTabIndex === 1">
                                    <div class="form-item">
                                        <div class="label">电极参数组</div>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">电极长度L(cm):</div>
                                        <input class="pui-input" v-model="mainRef.optical.djcd" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">中心电极宽度(μm):</div>
                                        <input class="pui-input" v-model="mainRef.optical.zxdjkd" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">中心电极厚度(μm):</div>
                                        <input class="pui-input" v-model="mainRef.optical.zxdjhd" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">电极间间距d(μm):</div>
                                        <input class="pui-input" v-model="mainRef.optical.djjjj" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">缓冲层厚度h(μm):</div>
                                        <input class="pui-input" v-model="mainRef.optical.hcchd" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">输入阻抗Z_s(Ω):</div>
                                        <input class="pui-input" v-model="mainRef.optical.srzk" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">负载阻抗Z_l(Ω):</div>
                                        <input class="pui-input" v-model="mainRef.optical.fzzk" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">电极损耗因子R_0:</div>
                                        <input class="pui-input" v-model="mainRef.optical.djshyz" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                                <div class="form-content" v-show="mainRef.nowTabIndex === 2">
                                    <div class="form-item">
                                        <div class="label">波导参数组</div>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">波导宽度a(μm):</div>
                                        <input class="pui-input" v-model="mainRef.optical.bdkd" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">波导厚度b(μm):</div>
                                        <input class="pui-input" v-model="mainRef.optical.bdhd" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">介质层厚度h(μm):</div>
                                        <input class="pui-input" v-model="mainRef.optical.jzchd" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">波导分光偏差rs(%):</div>
                                        <input class="pui-input" v-model="mainRef.optical.bdfgpc" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">电光重叠因子(a波导):</div>
                                        <input class="pui-input" v-model="mainRef.optical.dgcdyza" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">电光重叠因子(b波导):</div>
                                        <input class="pui-input" v-model="mainRef.optical.dgcdyzb" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                            </div>
                            <div class="tab-column">
                                <div :class="['tab-column_item', mainRef.nowTabIndex === i && 'active']" @click="tabClickHandle(i)" :key="i" v-for="(item, i) in mainRef.tabList.list"><span>{{ item }}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </pui-drawer>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'horizontal-design',
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, nextTick } from 'vue'
import ContextMenu from '../../MenuContext'
const props = defineProps({
    type: {
        type: String,
        default: 'plane'
    }
})
const { proxy } = getCurrentInstance() as any
const emit = defineEmits({
    'showSetting': (val: any) => {},
    'showQuantumWell': (val: any) => {}
})
const mainRef = reactive({
    isActive: false,
    isDisabled: false,
    nowTabIndex: 0,
    paramsList1: [{label: '参数组1', value: 'params1'}],
    paramsList2: [{label: '参数组2', value: 'params2'}],
    tabList: {
        name: 'MZ调制器-设置参数', // plane
        list: ['电压信号参数组', '电极参数组', '波导参数组']
    },
    optical: {
        tzsd: '',
        pzdy: 'Vpi/2',
        pzdypyl: '0',
        xhxl: '',
        csxzk: 'w,g,t,d',
        yxzsl: 'w,g,t,d',
        bbdy: 'd,L,garmma',
        wbcssh: 'f,z0',
        djcd: '2',
        zxdjkd: '20',
        zxdjhd: '0.8',
        djjjj: '20',
        hcchd: '0.5',
        srzk: '50',
        fzzk: '50',
        djshyz: '5',
        bdkd: '',
        bdhd: '',
        jzchd: '',
        bdfgpc: '0',
        dgcdyza: '0.8',
        dgcdyzb: '0.8',
    }
}) as any
const computed = () => {

}
const tabClickHandle = (i: any) => {
    mainRef.nowTabIndex = i
    
}
const showContextMenu = (e: any) => {
    const menuList = [
        {
            label: '编辑对象属性',
            type: 'edit',
            fn: () => {
            }
        },
        {
            label: '删除',
            type: 'delete',
            fn: () => {
            }
        }
    ]
    e.preventDefault()
    ContextMenu(e, menuList)
}
const init = () => {
    mainRef.nowTabIndex = 0
}
defineExpose({
    init
})
</script>